<template>
	<view class="main">
		<view class="mainV">
			<view class="maint" ref="backTop" top="300">
				<view class="maintt">
					<view class="maintti">
						<img :style="{backgroundColor:doctorInfo.img?'':'#eee'}"
							:src="doctorInfo.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'"
							alt="" />
					</view>
					<view class="mainttn">{{doctorInfo.name}}</view>
					<view class="mainttz">{{doctorInfo.zhicheng}}</view>
					<view class="mainttk">{{doctorInfo.keshi}}</view>
				</view>
				<view class="maintc">
					<view class="maintcc">
						<view class="maintccd">简介：{{doctorInfo.info}}</view>
						<view @click="openModal(1)">
							<uv-icon name="play-right-fill" color="#2c9b94cc" size="22"></uv-icon>
						</view>
					</view>
					<view class="maintcc">
						<view class="maintccd">业务专长：{{doctorInfo.info}}</view>
						<view @click="openModal(2)">
							<uv-icon name="play-right-fill" color="#2c9b94cc" size="22"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="maind">
				<uv-tabs :list="dateList" lineColor='#2c9b94' @change="changeTab" :activeStyle="{'color':'#2c9b94'}"
					lineWidth="60"></uv-tabs>
			</view>
			<view class="maino">
				<view class="mainoi">上午剩余:<text :style="{color:nowNum[0] == 0 ? '#F56C6C':'#2c9b94'}">【{{nowNum[0]}}】</text>
				</view>
				<view class="mainoi">下午剩余:<text :style="{color:nowNum[1] == 0 ? '#F56C6C':'#2c9b94'}">【{{nowNum[1]}}】</text>
				</view>
			</view>
			<view class="mainc">
				<view class="mainci" v-for="(i,o) in noLits" :key="o">
					<view class="maincil">
						<view class="mainciln">No.{{o+1}}</view>
						<view class="maincilt">{{i.time}}</view>
					</view>
					<view :class="['maincib',i.type == 0 ? '':i.type == 1 ?'maincibA' :'maincibC']" @click="openInfo(i)">
						{{i.type == 0 ? '预约':i.type == 1 ?'已约':'过期'}}
					</view>
				</view>
			</view>
		</view>

		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>
		<uv-modal ref="modal" :title="`${doctorInfo.name} ${ modalType == 1 ? '简介' : '业务专长'}`" :closeOnClickOverlay="false">
			<view class="slot-content">
				<view style="text-indent: 2em;">{{ modalType == 1 ? doctorInfo.info : doctorInfo.shangchang}}</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				scrollTop: 0,
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				doctorInfo: {
					name: '张大师',
					zhicheng: '主任医师',
					keshi: '消化科',
					id: 1,
					price: 20,
					shengyu: 0,
					img: 'https://www.ysrs.xyz/apiI/ll/file/preview/1743073403872ff80808195d597d90195d74563e00006.png',
					info: '张大师，医学博士，主任医师，硕士研究生导师。中国医师协会结直肠肿瘤专业委员会第一届委员会NOTES专业委员会委员，中国医师协会消化医师分会第四届委员会微创减重治疗专业委员会委员，河南省医学会消化内镜分会常委，首届河南省研究型医院学会单克隆免疫球蛋白相关疾病专业委员会委员中国老年医学学会消化分会委委员，中国非公立医疗机构协会消化病专委会秘书。毕业于北京协和医院，从事消化内科临床20余年，具有丰富的临床经验及内镜下治疗经验，对消化系统疑难重症疾病具有较高的诊疗能力，善于钻研。擅长各种消化系统疾病的内镜下的微创治疗，包括早期消化道肿瘤、阑尾炎内镜下逆行阑尾造影及治疗术、胆囊结石和胆囊息肉的NOTES保胆手术、责门失弛缓症Liu-POEM术、胃肠息肉治疗、各种原因消化道出血的治疗等。多次受邀在国内、国际学术会议进行讲座和手术演示。以第一作者及通讯作者发表SC收录文章12篇,参编论著3本。承担及参与省卫生厅重点科研项目3项。',
					shangchang: '擅长:过敏性疾病及免疫相关皮肤病的诊治，对湿疹、荨麻疹、特应性皮炎、银屑病、脂溢性皮炎、白癜风、斑秃、天疱疮、类天疱疮、痤疮、皮肌炎、红斑狼疮、硬皮病、扁平苔藓等有丰富的临床经验，对性传播疾病:梅毒、尖锐湿疣、生殖器疱疹的诊治有丰富的经验。对皮肤科罕见病及遗传性疾病的诊治经验丰富。'
				},
				dateList: [],
				numList: [
					[3, 12],
					[0, 1],
					[3, 0],
					[0, 0],
					[3, 12],
					[0, 1],
					[3, 0],
					[0, 0],
					[3, 12],
					[0, 1],
					[3, 0],
					[0, 0],
					[3, 12],
					[0, 1],
					[3, 0]
				],
				modalType: null,
				nowNum: [],
				chooseDate: '',
				mainType: null,
				noLits: [{
						time: '8:00-8:15',
						type: 1
					},
					{
						time: '8:15-8:30',
						type: 1
					},
					{
						time: '8:30-8:45',
						type: 2
					},
					{
						time: '8:45-9:00',
						type: 1
					},
					{
						time: '9:00-9:15',
						type: 2
					},
					{
						time: '9:15-9:30',
						type: 1
					},
					{
						time: '9:30-9:45',
						type: 1
					},
					{
						time: '9:45-10:00',
						type: 1
					},
					{
						time: '10:00-10:15',
						type: 2
					},
					{
						time: '10:15-10:30',
						type: 2
					},
					{
						time: '10:30-10:45',
						type: 1
					},
					{
						time: '10:45-11:00',
						type: 1
					},
					{
						time: '11:00-11:15',
						type: 2
					},
					{
						time: '11:15-11:30',
						type: 2
					},
					{
						time: '11:30-11:45',
						type: 1
					},
					{
						time: '11:45-12:00',
						type: 1
					},
					{
						time: '14:00-14:15',
						type: 2
					},
					{
						time: '14:15-14:30',
						type: 1
					},
					{
						time: '14:30-14:45',
						type: 1
					},
					{
						time: '14:45-15:00',
						type: 0
					},
					{
						time: '15:00-15:15',
						type: 0
					},
					{
						time: '15:15-15:30',
						type: 0
					},
					{
						time: '15:30-15:45',
						type: 0
					},
					{
						time: '15:45-16:00',
						type: 0
					},
					{
						time: '16:00-16:15',
						type: 1
					},
					{
						time: '16:15-16:30',
						type: 1
					},
					{
						time: '16:30-16:45',
						type: 1
					},
					{
						time: '16:45-17:00',
						type: 1
					},
					{
						time: '17:00-17:15',
						type: 1
					},
					{
						time: '17:15-17:30',
						type: 0
					},
					{
						time: '17:30-17:45',
						type: 0
					},
					{
						time: '17:45-18:00',
						type: 0
					},
				]
			}
		},
		onLoad(o) {
			// o.id
			this.mainType = o.type
			uni.setNavigationBarTitle({
				title: this.doctorInfo.name
			})
			if (this.$moment().format('HH') > 18) {
				for (let i = 1; i < 16; i++) {
					this.dateList.push({
						name: this.$moment().add(i, 'd').format('MM-DD'),
						week: this.$moment().add(i, 'd').format('dddd')
					})
				}
			} else {
				for (let i = 0; i < 15; i++) {
					this.dateList.push({
						name: this.$moment().add(i, 'd').format('MM-DD'),
						week: this.$moment().add(i, 'd').format('dddd')
					})
				}
			}
			this.numList.map((i, o) => {
				this.dateList[o].num = i[0] + i[1] == 0 ? '无号' : `剩余:${i[0] + i[1]}`
			})
			this.chooseDate = this.dateList[0]
			this.nowNum = this.numList[0]
		},
		methods: {
			openInfo(row) {
				uni.navigateTo({
					url: `/pages/AppointmentRegistration/chooseDoctorDateInfo?type=${this.mainType}&date=${JSON.stringify(this.chooseDate)}&time=${JSON.stringify(row)}&doctorInfo=${JSON.stringify(this.doctorInfo)}`
				})
			},
			openModal(type) {
				this.modalType = type
				this.$refs.modal.open();
			},
			changeTab(item) {
				this.chooseDate = item
				this.nowNum = this.numList[item.index]
			},
			change(index) {
				this.current = index
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
				// #ifdef APP-NVUE
				this.scrollTop = e.detail.scrollTop;
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		padding: 30rpx;
		background: linear-gradient(to bottom, #12acee22, #2c9b9422);
	}

	.maint {
		margin-top: 60rpx;
		position: relative;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;

		.maintt {
			display: flex;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px dashed #eee;
			display: flex;
			align-items: center;

			.maintti {
				background-color: #fff;
				border-radius: 50%;
				padding: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				z-index: 2;
				left: 30rpx;
				top: -60rpx;

				img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 22rpx;
					border-radius: 50%;
				}
			}

			.mainttn {
				margin-left: 160rpx;
				font-weight: bold;
				font-size: 33rpx;
			}

			.mainttz,
			.mainttk {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #888;
			}

		}

		.maintc {
			.maintcc {
				font-size: 28rpx;
				color: #888;
				display: flex;
				margin: 20rpx 0;
				align-items: center;
				justify-content: space-between;

				.maintccd {
					text-indent: 2em;
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-right: 10rpx;
				}
			}
		}

		.maintc {
			.maintcc {
				display: flex;
				margin: 20rpx 0;
				align-items: center;
				justify-content: space-between;

				.maintccd {
					text-indent: 2em;
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-right: 10rpx;
				}
			}
		}
	}

	.maind {
		margin-top: 30rpx;
		border-radius: 22rpx 22rpx 0 0;
		background-color: #fff;
		padding: 30rpx;
	}

	.maino {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 30rpx;
		height: 60rpx;
		background-color: #f5f5f5;
	}

	.mainc {
		border-radius: 0 0 12rpx 12rpx;
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 40rpx;

		.mainci {
			display: flex;
			height: 80rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px dashed #eee;

			.maincil {
				display: flex;
				font-weight: bold;

				.mainciln {
					width: 120rpx;
					color: #409EFF;
				}

				.maincilt {}
			}
		}

		.maincib {
			width: 100rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 12rpx;
			background: #2c9b94;
			color: #fff;
		}

		.maincibA,
		.maincibC {
			border: 1px solid #ccc;
			background: transparent;
			color: #ccc;
		}
	}

	/deep/.uv-tabs__wrapper__nav__item {
		flex-direction: column !important;
		height: 150rpx !important;
	}

	/deep/.uv-tabs__wrapper__nav__itemNoCan {
		.uv-tabs__wrapper__nav__item__text {
			color: #888 !important;
			text-align: center;
		}

		.uv-tabs__wrapper__nav__item__textNoCani {
			width: 110rpx;
			background-color: #888;
			border-radius: 12rpx;
			color: #fff !important;
		}
	}

	/deep/.uv-tabs__wrapper__nav__itemCan {
		.uv-tabs__wrapper__nav__item__text {
			color: #409EFF !important;
			text-align: center;
		}

		.uv-tabs__wrapper__nav__item__textCani {
			width: 110rpx;
			background-color: #409EFF;
			border-radius: 12rpx;
			color: #fff !important;
		}
	}

	/deep/.tabs__wrapper__nav__itemCans {
		.uv-tabs__wrapper__nav__item__text {
			color: #2c9b94 !important;
			text-align: center;
		}

		.uv-tabs__wrapper__nav__item__textCani {
			width: 110rpx;
			background-color: #2c9b94;
			border-radius: 12rpx;
			color: #fff !important;
		}

		.uv-tabs__wrapper__nav__item__textNoCani {
			width: 110rpx;
			background-color: #888;
			border-radius: 12rpx;
			color: #fff !important;
		}
	}
</style>